import { defineStore } from "pinia"
import type { AsideThemeSetting, HeaderThemeSetting, TabViewThemeSetting, ThemeSetting } from "@/settings"
import { asideThemeSettings, headerThemeSettings, tabViewThemeSettings, themeSettings } from "@/settings"
import { isEmpty } from "@/utils"

/**
 * 主题配置
 */
export const useThemeStore = defineStore("theme", () => {
    const theme = ref<ThemeSetting>({ ...themeSettings })
    const headerTheme = ref<HeaderThemeSetting>({ ...headerThemeSettings })
    const asideTheme = ref<AsideThemeSetting>({ ...asideThemeSettings })
    const tabViewTheme = ref<TabViewThemeSetting>({ ...tabViewThemeSettings })
    const collapsed = ref<boolean>(false)

    const headerFixed = computed(() => unref(headerTheme).fixed)
    const headerHeight = computed(() => unref(headerTheme).height)
    const asideFixed = computed(() => unref(headerFixed) || unref(asideTheme).fixed)

    const useTabView = computed(() => unref(theme).useTabView)
    const tabViewHeight = computed(() => (unref(useTabView) ? unref(tabViewTheme).height : 0))

    const headerLeftComponents = computed(() => unref(headerTheme).lComponents)
    const showHeaderLeftComponents = computed(() => !isEmpty(unref(headerLeftComponents)))
    const headerRightComponents = computed(() => unref(headerTheme).rComponents)
    const showHeaderRightComponents = computed(() => !isEmpty(unref(headerRightComponents)))

    function toggleCollapse() {
        collapsed.value = !collapsed.value
    }

    return {
        theme,
        headerTheme,
        asideTheme,
        tabViewTheme,
        collapsed,
        toggleCollapse,
        headerFixed,
        headerHeight,
        asideFixed,
        useTabView,
        tabViewHeight,
        headerLeftComponents,
        showHeaderLeftComponents,
        headerRightComponents,
        showHeaderRightComponents
    }
})
